<template v-cloak>
  <div class="header_area">
    <div class="time_area">
      <div class="time_detail">{{ time1 }}</div>
      <div class="time_date">
        <p class="time_solar">{{ time3 }}</p>
        <p class="time_lunar">{{ time2 }}</p>
      </div>
    </div>
    <img class="page_title" src="./img/药事服务中心自主服务平台.png" />
    <div class="serve_num">
      <div class="detail_num">
        <div>2</div>
        <div>7</div>
      </div>
      <p>药事服务(项)</p>
    </div>
  </div>
  <div class="main_area">
    <div class="left_area">
      <div class="shop_message">
        <div class="shop_introduce">
          <div class="shop_summary">
            <div class="shop_img"></div>
            <div class="name_address_rate">
              <div class="shop_name">华东医药台州有限公司东海大道店</div>
              <div class="shop_address">台州椒江区东海大道792号</div>
              <div class="shop_rate">
                <a-rate v-model:value="value" />
              </div>
            </div>
          </div>
          <div class="shop_detail_introduce">
            华东大药房东海大道店，是椒江区内开设的一家5星药事服务中心。面向所有居民，让居民在“家门口”享受到专业、优质、安全、人性化的用药用械咨询指导服务，满足群众知药、懂药、购好药、会用药的需求。华东大药房东海大道店，是椒江区内开设的一家5星药事服务中心。面向所有居民，让居民在“家门口”享受到专业、优质、安全、人......
          </div>
        </div>
        <div class="contact_way">
          <p>药师热线</p>
          <img src="./img/药师.png" alt="" />
          <p class="doctor_name">蒋医师</p>
          <p class="doctor_phone">1358 5864 8526</p>
          <div class="qr_code"></div>
          <p>扫码关注</p>
        </div>
      </div>
      <div class="cross_line"></div>
      <div class="shop_show">
        <div class="nav_bar">
          <div v-bind:class="{ active: isShow == 1 }" @click="changeShow(1)">
            相关证件
          </div>
          <div v-bind:class="{ active: isShow == 2 }" @click="changeShow(2)">
            药师资质
          </div>
          <div v-bind:class="{ active: isShow == 3 }" @click="changeShow(3)">
            药事服务站工作制度
          </div>
          <div v-bind:class="{ active: isShow == 4 }" @click="changeShow(4)">
            职业药师风采
          </div>
        </div>
        <div class="relevant_document" v-show="isShow == '1'">相关证件</div>
        <div class="doctor_qualification" v-show="isShow == '2'">
          <div></div>
          <div></div>
          <div></div>
          <div></div>
        </div>
        <div class="working_system" v-show="isShow == '3'">
          <div class="system_content">
            <p>
              树立以“人民健康为中心”的思想，紧紧围绕为民办实事的目标，建立药事服务站，为群众提供药事指导、中药代工、科普宣传以及生活服务等公益性服务，保障群众用药安全，切实增强群众的获得感。特制定以下工作制度。
            </p>
            <p>
              第一条
              认真贯彻党和国家药品安全工作方针、政策，严格执行药品安全法律法规和各项规章制度，认真履行岗位职责。
            </p>
            <p>
              第二条
              药事服务站要置提供药事指导、中药代工、科普宣传以及生活服务的区域和设施，满足群众需求。
            </p>
            <p>
              第三条
              药事服务站至少配备1名执业药师专职开展药事指导服务。企业营业期间，专职人员应当在职在岗，积极主动，热情为群众服务，努力做好药事服务，提高药学服务水平。
            </p>
            <p>
              第四条
              积极开展健康体验服务，为群众提供免费测量（血压、血糖、血脂、骨密度、身高、体重）等项目，对测量结果提供相应的指导建议。
            </p>
            <p>
              第五条
              做好慢性病健康管理，针对高血压、高血脂、高血糖、冠心病等患者，建立药历档案，做好用药指导、跟踪服务和电话回访，实现动态管理。
            </p>
            <p>
              第六条
              建立药品不良反应登记和报告制度，积极收集消费者用药情况信息，对于消费者使用药品过程中出现的不良反应及时规范记录和上报有关部门。
            </p>
            <p>
              第七条
              开展过期药品回收，实现三专，即专人负责、专柜存放、专用标签，做好回收记录，并定期送往有毒有害垃圾处理站。
            </p>
            <p>
              第八条积极受理消费者的投诉，对消费者意见或问题及时处理，并做好记录。
            </p>
            <p>
              第九条积极开展中药代加工，提供中药材（饮片）切片、打粉、膏方、代煎药等服务，涉及收费项目，做到明码公示。
            </p>
            <p>
              第十条
              每季度至少开展1次疾病科普知识、健康常识、用药常识、疾病预防等科普宣传活动，向消费者发放健康科普资讯，资讯内容符合国家有关规定，指导并帮助社区居民不断提高健康水平。
            </p>
            <p>
              第十一条
              认真开展药事服务站服务项目指南中各类服务，做好相关素材收集、数据统计和台账整理，及时上传“药事通”管理系统。
            </p>
          </div>
        </div>
        <div class="doctor_honor" v-show="isShow == '4'">
          <div class="doctor_img"></div>
          <div class="doctor_img"></div>
          <div class="doctor_img"></div>
          <div class="doctor_img"></div>
          <div class="doctor_img"></div>
          <div class="doctor_img"></div>
        </div>
      </div>
    </div>
    <div class="right_area">
      <div class="top_function_area">
        <div class="guide_function" @click="goTo('/guide')">
          <router-link to="/guide">药事指导</router-link>
        </div>
        <div class="query_and_serve">
          <div @click="goTo('/test2')">药事查询</div>
          <div @click="goTo('/test3')">中医药服务</div>
        </div>
      </div>
      <div class="bottom_function_area">
        <div>科普宣传</div>
        <div>生活服务</div>
        <div>消费者投诉</div>
      </div>
    </div>
  </div>
  <div class="footer_area">
    <img src="./img/512.png" alt="" />
    <p>椒江区市场监督管理局 监督热线 xxxx-xxxxxxxx</p>
  </div>
</template>

<script>
import { onMounted, reactive, toRefs, ref, onUnmounted } from 'vue'
import { useRouter } from 'vue-router'
import moment from 'moment'
import toLunar from '../utils/nongLi.js'
import 'moment/locale/zh-cn'
export default {
  name: 'home',
  setup() {
    let router = useRouter()
    let state = reactive({
      time1: '',
      // YYYY/MM/DDdddd
      time2: '',
      // 农历
      time3: '',
      isShow: 1,
      timer: null,
    })
    let value = ref(4)
    onMounted(() => {
      getdate()
      state.timer = setInterval(() => {
        getNowTime()
      }, 1000)
    })
    //获取日期
    let getdate = () => {
      state.time1 = moment().format('HH:mm')
      state.time2 = moment().format('YYYY/MM/DDdddd')
      state.time3 = state.time2.substring(0, state.time2.length - 3)
      state.time3 = state.time3.split('/')
      state.time3 = toLunar(state.time3[0], state.time3[1], state.time3[2])
    }
    // 获取当前时间
    let getNowTime = () => {
      state.time1 = moment().format('HH:mm')
    }
    let changeShow = (value) => {
      state.isShow = value
    }
    //页面跳转
    let goTo = (value) => {
      router.push({
        path: value,
      })
    }
    onUnmounted(() => {
      clearInterval(state.timer)
      state.timer = null
    })
    return {
      ...toRefs(state),
      changeShow,
      value,
      getdate,
      getNowTime,
      goTo,
    }
  },
}
</script>

<style lang="less" scoped>
* {
  margin: 0;
  padding: 0;
}
[v-cloak] {
  display: none;
}
.header_area {
  height: 142px;
  display: flex;
  padding-left: 50px;
  padding-right: 51px;
  justify-content: space-between;
  box-shadow: 0px 6px 20px 0px rgba(0, 122, 253, 0.1);
  .time_area {
    display: flex;
    height: 142px;
    width: 400px;
    // justify-content: center;
    align-items: center;
    .time_detail {
      margin-right: 10px;
      width: 162px;
      height: 44px;
      line-height: 44px;
      font-size: 60px;
      font-family: HBOLogoSupplement, HBOLogoSupplement-Regular;
      font-weight: 700;
      text-align: left;
      color: #007afd;
    }
    .time_date {
      height: 44px;
      display: flex;
      flex-direction: column;
      color: #969696;
      font-size: 12px;
      align-content: space-between;
      .time_solar {
        padding-top: 3px;
        margin-bottom: 5px;
      }
      .time_lunar {
        padding-bottom: 3px;
      }
    }
  }
  .page_title {
    margin-top: 16px;
    width: 546px;
    height: 137px;
  }
  .serve_num {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    height: 142px;
    width: 400px;
    .detail_num {
      display: flex;
      margin-bottom: 11px;
      div {
        width: 41px;
        height: 62px;
        margin-left: 10px;
        text-align: center;
        line-height: 62px;
        font-size: 55px;
        font-family: Helvetica, Helvetica-Condensed-Black-Se;
        font-weight: 700;
        color: #007afd;
        background-color: #d7eaff;
      }
    }
    p {
      width: 89px;
      height: 14px;
      font-size: 14px;
      font-family: Microsoft YaHei, Microsoft YaHei-Regular;
      font-weight: 400;
      text-align: center;
      color: #969696;
      line-height: 14px;
    }
  }
}
.main_area {
  display: flex;
  height: 825px;
  margin-left: 50px;
  margin-right: 51px;
  margin-top: 38px;
  .left_area {
    box-shadow: 0 0 43px 3px #e5e5e5;
    display: flex;
    flex-direction: column;
    margin-right: 40px;
    .shop_message {
      display: flex;
      height: 364px;
      padding-right: 56px;
      .shop_introduce {
        //  width: 874px;
        display: flex;
        flex-direction: column;
        padding-top: 30px;
        padding-left: 30px;
        padding-right: 37px;
        .shop_summary {
          display: flex;
          margin-bottom: 26px;
          .shop_img {
            width: 126px;
            height: 126px;
            background-color: #99ccff;
          }
          .name_address_rate {
            display: flex;
            flex-direction: column;
            padding-left: 30px;
            .shop_name {
              height: 31px;
              width: 450px;
              margin-bottom: 20px;
              font: 30px bold;
            }
            .shop_address {
              height: 14px;
              width: 178px;
              margin-bottom: 21px;
              font: 14px medium;
            }
            .shop_rate {
              height: 34px;
              width: 178px;
            }
          }
        }

        .shop_detail_introduce {
          font-size: 14px;
          font-family: PingFang SC, PingFang SC-Medium;
          font-weight: 500;
          text-align: left;
          color: #323232;
          line-height: 30px;
        }
      }
      .contact_way {
        padding-top: 26px;
        width: 109px;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-left: 60px;
        border-left: 1px solid #d7eaff;
        p:first-child {
          width: 64px;
          height: 16px;
          font-size: 16px;
          font-family: Microsoft YaHei Bold, Microsoft YaHei Bold-Bold;
          font-weight: 700;
          text-align: left;
          color: #323232;
          line-height: 30px;
          margin-bottom: 19px;
        }
        img {
          width: 30px;
          height: 34px;
        }
        .doctor_name {
          width: 103px;
          height: 15px;
          font-size: 14px;
          font-family: Microsoft YaHei Regular, Microsoft YaHei Regular-Regular;
          font-weight: 400;
          text-align: center;
          color: #969696;
          line-height: 24px;
          margin-bottom: 5px;
        }
        .doctor_phone {
          width: 103px;
          height: 15px;
          margin-bottom: 18px;
        }
        .qr_code {
          width: 109px;
          height: 109px;
          background: #d7eaff;
          margin-bottom: 12px;
        }
        p:last-child {
          width: 56px;
          height: 14px;
          font-size: 14px;
          font-family: PingFang SC Medium, PingFang SC Medium-Medium;
          font-weight: 500;
          text-align: left;
          color: #323232;
          line-height: 14px;
        }
      }
    }
    .shop_show {
      height: 517px;
      background-color: #d7eaff;
      padding-right: 30px;
      .nav_bar {
        display: flex;
        margin-top: 33px;
        height: 76px;
        div {
          height: 48px;
          line-height: 24px;
          opacity: 0.52;
          font-size: 24px;
          font-family: Microsoft YaHei, Microsoft YaHei-Regular;
          font-weight: 400;
          text-align: center;
          color: #32518a;
          padding-bottom: 16px;
        }
      }
      .nav_bar :nth-child(1) {
        margin-left: 29px;
        margin-right: 70px;
        width: 96px;
      }
      .nav_bar :nth-child(2) {
        margin-right: 77px;
        width: 96px;
      }
      .nav_bar :nth-child(3) {
        margin-right: 70px;
        width: 216px;
      }
      .nav_bar :nth-child(4) {
        width: 144px;
      }
      .relevant_document {
        height: 408px;
      }
      .doctor_qualification {
        display: flex;
        overflow-y: scroll;
        flex-wrap: wrap;
        padding-left: 29px;
        height: 408px;
        div {
          width: 286px;
          height: 408px;
          margin-right: 24px;
          background-color: #e5e5e5;
          margin-bottom: 28px;
        }
      }
      .working_system {
        height: 408px;
        padding-left: 34px;
        padding-bottom: 28px;
        overflow-y: scroll;
        .system_content {
          column-count: 2;
          p {
            font-size: 14px;
            font-family: Microsoft YaHei Regular,
              Microsoft YaHei Regular-Regular;
            font-weight: 400;
            text-align: left;
            color: #32518a;
            line-height: 30px;
          }
          p:first-child {
            text-indent: 2em;
          }
        }
      }
      .doctor_honor {
        height: 408px;
        display: flex;
        flex-wrap: wrap;
        overflow-y: scroll;
        padding-left: 26px;
        //overflow-x: hidden;
        .doctor_img {
          height: 408px;
          width: 233px;
          background-color: #e5e5e5;
          margin-right: 24px;
          margin-bottom: 15px;
        }
      }
    }
  }
  .right_area {
    width: 679px;
    height: 825px;
    .top_function_area {
      display: flex;
      justify-content: space-between;
      width: 679px;
      height: 480px;
      margin-bottom: 39px;
      .guide_function {
        width: 320px;
        height: 480px;
        box-shadow: 0px 0px 43px 3px #e5e5e5;
      }
      .query_and_serve {
        width: 320px;
        height: 480px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        div {
          width: 320px;
          height: 222.5px;
          box-shadow: 0px 0px 43px 3px #e5e5e5;
        }
      }
    }
    .bottom_function_area {
      display: flex;
      justify-content: space-between;
      div {
        width: 200px;
        height: 306px;
        box-shadow: 0px 0px 43px 3px #e5e5e5;
      }
    }
  }
}
.footer_area {
  display: flex;
  height: 75px;
  justify-content: center;
  img {
    width: 26px;
    height: 28px;
    margin-right: 11px;
    margin-top: 23px;
  }
  p {
    height: 18px;
    font-size: 18px;
    line-height: 18px;
    text-align: center;
    font-family: PingFang SC Medium, PingFang SC Medium-Medium;
    font-weight: 500;
    color: #323232;
    margin-top: 28px;
  }
}
.active {
  border-bottom: 8px solid #32518a;
  opacity: 1 !important;
  font-weight: 700 !important;
}
::-webkit-scrollbar {
  width: 8px;
  opacity: 0.6;
  background: #f3f8ff;
  border-radius: 4px;
}
/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track {
  border-radius: 4px;
  background: #d7eaff;
}
/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background: #f3f8ff;
}
</style>
